<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>流水详情</title>
    <link rel="stylesheet" href="../src/css/weui.css">
    <script src="../src/js/libs/jquery-3.0.0.min.js"></script>
    <script src="../src/js/main.js"></script>
    <link rel="stylesheet" href="../src/css/star-rating-svg.css">
    <style>
        body{
            background-color: #F2F2F2;
        }
        /* 顶部样式 */
        .weui_cells.top{
            line-height: 4rem;
            margin-top: 0;
            background-color: #F2F2F2;
        }
        .weui_cells.top .weui_cell_hd{
            width:3.125rem;
            height: 3.125rem;
            background: url("../src/images/icons.png");
            background-position:0 -5.625rem;
            background-size: 18.0625rem 11.0834rem;
            margin-left: 30%;
            margin-right: 0.3rem;
        }
        .weui_cells.top .weui_cell_bd.weui_cell_primary{
            font-size: 2rem;
        }


       /* 流水详情 */
        .weui_media_box{
             background-color: #FFFFff;
            text-align: center;
        }
        .weui_media_box .weui_media_title{
            font-size: 2rem;
        }
       .weui_cells.detail{
           margin-top: 0;
       }

        /* 评价 */
        .evaluate{
            width: 85%;
            height: 3rem;
            margin: 0 auto 1rem;
            border: solid 1px #A1A1A1;
            border-radius: 2px;
            padding: 10px;
            font-size: 0.8375rem;
            color: #A1A1A1;
        }
        /* 按钮样式*/
      .weui_btn.weui_btn_primary{
          width: 90%;
      }

    </style>
</head>
<body>

<div class="weui_cells top">
  <div class="weui_cell ">
    <div class="weui_cell_hd"></div>
    <div class="weui_cell_bd weui_cell_primary">
        <p>王女士</p>
    </div>
  </div>
</div>
<div class="weui_panel_bd">
    <div  class="weui_media_box weui_media_appmsg">
        <div class="weui_media_bd">
            <h4 class="weui_media_title">+200.00</h4>
            <p class="weui_media_desc">交易完成</p>
        </div>
    </div>
</div>
<div class="weui_cells detail">
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <p>交易说明</p>
        </div>
        <div class="weui_cell_ft">磁护机油套装4L(测试)</div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <p>交易编号</p>
        </div>
        <div class="weui_cell_ft">123456789</div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <p>交易时间</p>
        </div>
        <div class="weui_cell_ft">2016-07-30 24：00</div>
    </div>
</div>


<div class="weui_cells">
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <p>交易评价</p>
        </div>
        <div class="weui_cell_ft">
            <div class="my-rating"></div>
        </div>
    </div>
    <p class="evaluate">
        好评如潮,好评如潮,好评如潮
    </p>
</div>

<a href="cash-refund.html" class="weui_btn weui_btn_primary">退款申请</a>

<script src="../src/js/libs/jquery-3.0.0.min.js"></script>
<script src="../src/js/libs/jquery.star-rating-svg.js"></script>
<script>
    $(".my-rating").starRating({
        initialRating: 4,
        starSize: 25
    });
</script>
</body>
</html>